<template>
	<view class="tickets-detail-base-info">
		<view class="base-info-wrapper">
      <view class="ticket-name">
			{{product.name}}
      </view>

      <!-- 标签 -->
      <template v-if="product.labelSpecialServices">
        <view v-for="(tag, index) in product.labelSpecialServices" :key="index" class="ticket-tag">{{tag}}</view>
      </template>

      <text v-if="product.subtitle" class="subtitle">{{product.subtitle}}</text>

      <!-- 特色标签 -->
      <view class="feature-labels">
          <!-- 即时确认 -->
          <view v-if="product.labelConfirmation" class="label-item">
            <basic-icons name="iconyanchituifang" size="30rpx" padding="0 10rpx 0 0" color="#EA9A2B"/>
            <text > {{product.labelConfirmation}}</text>
          </view>
          
          <!-- 持续时间 -->
          <view v-if="product.labelServiceTime" class="label-item">
            <basic-icons name="icon-time" size="30rpx" padding="0 10rpx 0 0"  color="#88cd3c"/>
            <text >{{product.labelServiceTime}}</text>
          </view>
          
          <!-- 免费取消 -->
          <view v-if="product.labelFreeCancellation" class="label-item">
            <basic-icons name="icon148" size="30rpx" padding="0 10rpx 0 0"  color="#dddddd"/>
            <text>{{product.labelFreeCancellation}}</text>
          </view>
          
          <!-- 接送方式 -->
          <view v-if="product.labelTransferMethod" class="label-item">
            <text>{{product.labelTransferMethod}}</text>
            <basic-icons name="icon69" size="30rpx" padding="0 1rprx 0 0"  color="#2C8AE2"/>
          </view>
          
          <!-- 用车距离 -->
          <view v-if="product.labelDistance" class="label-item">
            <basic-icons name="icon2" size="30rpx" padding="0 10rpx 0 0"  color="#00CBD6"/>
            <text>{{product.labelDistance}}</text>
          </view>
          
          <!-- 服务语言 -->
          <view v-if="product.labelServiceLanguages" class="label-item">
            <basic-icons name="iconfanyi" size="30rpx" padding="0 10rpx 0 0"  color="#666666"/>
            <text v-for="(lang, index) in product.labelServiceLanguages" :key="index">{{lang}}&nbsp;&nbsp;</text>
          </view>
      </view>
    </view>
	</view>
</template>
<script>

export default {
	name: 'ticket-base-info',

	props: {
		product: {
			type: Object,
			required: true
		}
	},
	data() {
    return {
    }
	},
	
	methods: {}
}
</script>
<style lang="less">
.tickets-detail-base-info {
	margin-bottom: -20px;

  .base-info-wrapper {
    z-index: 1;
    overflow: hidden;

    padding: 30rpx;
    padding-bottom: 0;
    margin-top: -20rpx;
    position: relative;

    font-size: 28rpx;
    background-color: #fff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
  }
  
	.ticket-name {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 30rpx
  }
  
  .subtitle {
    display: block;
    position: relative;
		color: @font_desc_color;
		line-height: 42rpx;
		padding-bottom: 30rpx;
    // margin: 30rpx 0;
    text-align: justify;
  }

	.ticket-tag {
		.round-tag(34rpx, 8rpx);

		color: @font_tag_color;
		font-size: 20rpx;
		background-color: fade(@font_tag_color, 10%);
		margin: 10rpx 20rpx 10rpx 0;
  }
  
  .feature-labels {
    .label-item {
      display: inline-block;
      min-width: 30%;
      
      text-align: left;
      font-size: 28rpx;
      color: @font_desc_color;

      margin: 30rpx 0;
      padding-right: 30rpx;
      box-sizing: border-box;
    }

    border-top: 1rpx solid @border_color;
  }
}
</style>